<template>
  <security-module>
    <div class="app-security-center-login__top" slot="top">
      <div class="app-security-center-login__top__title-wrapper">{{ bodyTitle }}</div>
    </div>
    <div class="app-security-center-login__center" slot="center">
      <div class="app-security-center-login__center__btn-wrapper">
        <t-button name="submit" size="full" type="primary" @click="handleClick">注销</t-button>
      </div>
    </div>
  </security-module>
</template>

<script>
  import TButton from '@/components/button';
  import securityModule from './module';

  export default {
    name: 'app-security-login',
    components: {
      TButton,
      securityModule,
    },
    props: {
      bodyTitle: {
        type: String,
        default: '用户中心',
      },
    },
    methods: {
      handleClick() {
        this.logout();
      },
      logout() {
        this.$http.request({
          url: 'api/logout',
          method: 'post',
        }).then(() => {
          this.$stateHub.auth = false;
          this.$eventHub.$emit('logout');
          this.$router.push('/account/security/login');
        }).catch((error) => {
          if (error.response.status === 401) {
            this.$stateHub.auth = false;
            this.$router.push('/account/security/actions/login');
          }
          this.$eventHub.$emit('logout');
        });
      },
    },
  };
</script>